<template>
  <!-- 采购单详情 -->
  <div
    class="procurementDetail"
    v-if="info"
  >
    <div class="g-con">
      <div class="flexsb">
        <div class="wp-50">{{ t('ProcurementOnlineQuotation.l2') }}: {{ info.orderNo }}</div>
      </div>

      <ShippingInfo
        v-if="info.shcwShippingVo"
        :data="info.shcwShippingVo"
      />

      <div
        class="info mt-3"
        v-else
      >
        <div class="tit">{{ t('ProcurementOnlineQuotation.t1') }}</div>
        <div class="con flexsb mt-2">
          <div>{{ t('ProcurementOnlineQuotation.l4') }}: {{ info.shipRepairYardName }}</div>
          <div>{{ t('ProcurementOnlineQuotation.l5') }}:{{ info.repairYardCountries }}</div>
          <div>{{ t('ProcurementOnlineQuotation.l6') }}:{{ info.repairYardArea }}</div>
        </div>
      </div>

      <div class="info mt-3">
        <div class="tit">{{ t('ProcurementOnlineQuotation.l3') }}</div>
        <div class="con mt-2">
          {{ info.procureStatement }}
        </div>
      </div>

      <div class="info mt-3">
        <div class="tit">{{ t('procurement.step2page.form.l2') }}</div>
        <div class="con mt-2">{{ info.procureOrderDetailEditVoList[0]?.projectName }}</div>
      </div>

      <div class="info mt-3">
        <div class="table">
          <el-auto-resizer>
            <template #default="{ height, width }">
              <el-table-v2
                :columns="columns"
                :data="info.procureOrderDetailEditVoList"
                :width="width"
                :height="height"
                fixed
              />
            </template>
          </el-auto-resizer>
        </div>
      </div>

      <div class="info mt-3">
        <div class="tit">{{ t('attachments') }}</div>
        <div class="con mt-2">
          <div
            v-for="(item, index) in info.urlList"
            :key="index"
          >
            <a
                :href="item.url"
                target="_blank"
            >
              {{ item.file_name }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { detailApi } from '@/service/procurement'

import useDict from '@/hooks/useDict'
const { dictData, getDictData, getDictLabel } = useDict()

const { t, locale } = useI18n()

watch(locale, () => {
  init()
})

const router = useRouter()
const route = useRoute()

const id = route.query.id

onBeforeMount(() => {
  init()
})

//
const info = ref(null)
const getDetail = async () => {
  await detailApi(id).then(({ data }) => {
    info.value = data
  })
}

// 表格 列
const columns = ref([])
const getColumns = () => {
  columns.value = [
    {
      title: t('indexNumber'),
      key: 'index',
      dataKey: 'index',
      width: 50,
      cellRenderer: ({ rowIndex }) => {
        return rowIndex + 1
      }
    },
    {
      title: t('procurement.ProjectAdd.l2_1'),
      key: 'projectName',
      dataKey: 'projectName',
      width: 195
    },
    {
      title: t('procurement.ProjectAdd.l3_1'),
      key: 'procureNo',
      dataKey: 'procureNo',
      width: 160
    },
    {
      title: t('procurement.ProjectAdd.l11'),
      key: 'drawingNumber',
      dataKey: 'drawingNumber',
      width: 150
    },
    {
      title: t('procurement.category1Col.tit5'),
      key: 'procureSpec',
      dataKey: 'procureSpec',
      width: 100
    },
    // {
    //   title: t('procurement.col.t2'),
    //   key: 'procureModel',
    //   dataKey: 'procureModel',
    //   width: 100
    // },
    {
      title: t('procurement.col.t3'),
      key: 'unit',
      dataKey: 'unit',
      width: 100
    },
    {
      title: t('procurement.category4Col.tit5'),
      key: 'requireCount',
      dataKey: 'requireCount',
      width: 100
    },
    {
      title: t('procurement.category2Col.tit8'),
      key: 'remark',
      dataKey: 'remark',
      width: 350
    }
  ]
}

//
const init = async () => {
  getDictData('ships_type')
  getDictData('classification_society')
  await getDetail()
  getColumns()
}
</script>

<style scoped lang="scss">
.procurementDetail {
  background: #f5f5f5;
  padding: 30px 0;
  margin-bottom: -76px;

  .info {
    background: #fff;
    padding: 24px;
    > .tit {
      border-bottom: 2px solid #252628;
      font-weight: bold;
      padding: 10px 0;
    }
  }

  .table {
    border-top: 2px solid #252628;
    height: 700px;

    :deep(.el-table-v2__header-cell) {
      background: #f0f3f8;
      color: #252628;
    }
    :deep(.no-save) {
      background: #f9ecd9;
    }
  }
}
</style>
